<template>
  <div class="Toppadding">
      <my-head title="确认订单"></my-head>
      <div class="place">
             <div @click="gotoPlace" v-if='!place' class="placeDiv">
                  <van-icon name="plus" color='#ff5687' size='25'/>
                  <p>请添加收货地址</p>
             </div>
             <div v-else class="placeDiv1">
                     <div class="placeDiv_1 van-multi-ellipsis--l2"><van-icon name="map-marked" color='ff5687' />地址 : {{place.address}}</div>
                     <div class="placeDiv_2"><van-icon name="manager" color='ff5687'/>收件人 : {{place.name}}{{place.tel}}</div>
             </div>
      </div>
      <div class="mustShop">
                <p> <span>现货商品</span> <span>共{{num}}件</span></p>
                <div class="mustShopmain">
                    <ul>
                        <li v-for="(item,index) in order" :key="index">
                            <img :src="item.shopImg" alt="">
                            <p>
                                <span>￥{{item.shopPri}}</span>
                                <span><van-icon name="cross" color='#ff5687'/>
                                {{item.count}}
                                </span>
                            </p>
                        </li>
                        
                       
                    </ul>
                </div>
      </div>
      <div class="mustShopFooter">
                <p class="mustShopFooter2">￥{{allPrice}}</p>
                <p class="mustShopFooter1" @click="gotoPayload">提交订单</p>
      </div>
  </div>
</template>

<script>
export default {
data() {
    return {
        order:null,
        num:null,
        allPrice:null,
        place:null
    }
},
methods: {
    //查找购物车表里面选中的数据
    async getShopMust(){
        let res=await this.$ajax.getShopCar({
           phone:this.userInfo.phone,
           check:true
        })
        console.log(res);
        this.order=res
        for(let i=0;i<res.length;i++){
            this.num+=res[i].count
            this.allPrice+=res[i].shopPri*1*res[i].count
        }
    },
    //跳转到编辑地址界面
    gotoPlace(){
        this.$router.push({
            name:'placeList'
        })
    },
    //有地址后跳转到订单界面
    gotoPayload(){
        if(this.place){
            this.$router.push({
            name:'payload',
            query:{
                place:this.place,
                money:this.allPrice
            }
        })
        }else{
            this.$toast('请选择收获地址~~~')
        }
    }
},
mounted() {
    if(this.userInfo){
        this.getShopMust()
    }
    if(this.$route.query.id){
      console.log(this.$route.query);
      this.place=this.$route.query
    }
    else{
      console.log(111);
      console.log(this.place);
    }
},
}
</script>

<style>
.place{
width: 100%;
height: 100px;
position: relative;
margin-top: 5px;
margin-bottom: 10px;
 background: white;

}
.place .placeDiv{
    font-size: 16px;
    line-height: 16px;
    width: 128px;
    text-align: center;
    color:#ff5687;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 50px;
   
}
.place .placeDiv p{
    margin-top: 5px;
}
.mustShop{
        background: #fff;
        padding: 18px 16px ;
            color: #212121;
}
.mustShop p{
        padding-bottom: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    
}
.mustShopmain{
    width: 100%;
}
.mustShopmain ul{
    width: 100%;
    display: flex;
    justify-content: start;
    overflow-x: auto;
    overflow-y:hidden ;
    
}
.mustShopmain li{
    height: 130px;
    width: 100px;
    margin-left: 5px;
    box-shadow: 0px 0px 5px #c5c4c4;
    border-radius:5px ;
   
}
.mustShopmain li img{
    height: 100px;
    width: 100px;
    margin-bottom: 5px;
}
.mustShopmain li p{
    padding: 0px 10px ;
    line-height: 20px;
}
.mustShopFooter{
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    background: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
}
.mustShopFooter2{
    line-height: 50px;
    font-size: 16px;
    color: #ff5687;
}
.mustShopFooter1{
    font-size: 20px;
    width: 100px;
    padding: 0px 10px;
    border-radius:40px ;
    background: #ff5687;
    color: white;
    line-height: 50px;
    text-align: center;
}
.placeDiv1{
    padding: 20px;
font-size: 20px;
color: #ff5687;
}

</style>